<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.HTML（浏览器机制） | Electrolux_blog</title>
    <meta name="description" content="hello world">
    <link rel="preload stylesheet" href="/front-base-know-blog/assets/style.4f9339b2.css" as="style">
    <script type="module" src="/front-base-know-blog/assets/app.b7849f6a.js"></script>
    <link rel="preload" href="/front-base-know-blog/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/framework.408c4d71.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/chunks/theme.bf7db135.js">
  <link rel="modulepreload" href="/front-base-know-blog/assets/know_know_1html.md.19aaf16a.lean.js">
  <link rel="icon" type="image/svg+xml" href="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <script>import("/front-base-know-blog/_pagefind/pagefind.js").then(n=>{window.__pagefind__=n}).catch(()=>{console.log("not load /_pagefind/pagefind.js")});</script>
  </head>
  <body><!--v-if--><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-f0b011de><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f0b011de data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-7c10cd25><div class="container" data-v-7c10cd25><div class="title" data-v-7c10cd25><div class="VPNavBarTitle has-sidebar" data-v-7c10cd25 data-v-4d981103><a class="title" href="/front-base-know-blog/" data-v-4d981103><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg" alt data-v-6db2186b><!--]--><!--[-->Electrolux_blog<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-7c10cd25><div class="curtain" data-v-7c10cd25></div><div class="content-body" data-v-7c10cd25><!--[--><!--]--><div class="blog-search search" data-pagefind-ignore="all" data-v-7c10cd25 style="--dba016e0:1;" data-v-e09e7552><div class="nav-search-btn-wait" data-v-e09e7552><svg width="14" height="14" viewBox="0 0 20 20" data-v-e09e7552><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" data-v-e09e7552></path></svg><span class="search-tip" data-v-e09e7552>Search</span><span class="metaKey" data-v-e09e7552> K </span></div><!--teleport start--><!--teleport end--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-7c10cd25 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->首页<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/front-base-know-blog/know/know/1html" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端基础<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/supper/supper/1%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->前端工程化<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/python/flask" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Python<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/java/java" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->Java<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/front-base-know-blog/project/javadump%E5%88%86%E6%9E%90" tabindex="0" data-v-7f418b0f data-v-5e623618 data-v-8f4dc553><!--[-->项目<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-7c10cd25 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-7c10cd25 data-v-0394ad82 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-7c10cd25 data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-87de0873 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-87de0873><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-87de0873><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-d7a53887><!--[--><a class="VPSocialLink" href="https://gitee.com/Electrolux" aria-label="github" target="_blank" rel="noopener" data-v-d7a53887 data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-7c10cd25 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f0b011de data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f0b011de data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible has-active" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>前端基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/1html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>html(浏览器)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/2javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(1)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/3javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(2)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E6%89%8B%E5%86%99%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 手写题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/4javascript%E4%BB%A3%E7%A0%81%E8%BE%93%E5%87%BA%E9%A2%98" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(3) | 代码输出</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/5javascript-es6" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(4) | es6</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/9javascript%E5%9F%BA%E7%A1%80" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>js基础(5)</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/6ts" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>TypeScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/7css" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>CSS</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/know/8bug" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>BUG</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>计算机基础</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80/1%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>计算机网络</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>框架 | 工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/1vue" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/2react" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>react</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/3ssr" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ssr</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/4%E5%BE%AE%E5%89%8D%E7%AB%AF" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>微前端</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/5vue3" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>vue3</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/6nginx" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>nginx</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/7python" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>python</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/8ffmpeg" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>ffmpeg</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/7tensorFlow" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>tensorFlow</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/8mediapipe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>mediapipe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/10aframe" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>aframe</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/11%E9%80%86%E5%90%91%E6%95%B0%E6%8D%AEcrawl" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>逆向数据crawl</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/12threejs" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>threejs</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/13electron" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E6%A1%86%E6%9E%B6/17webpack" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>13electron</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-af16598e><section class="VPSidebarItem level-0 collapsible" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>优化 | 工程</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-c4656e6d><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-c4656e6d><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/1%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%92%8C%E5%AE%89%E5%85%A8" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化和安全</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/3%E7%AE%97%E6%B3%95" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>算法</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/4%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>性能优化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/5npm,%E7%BB%84%E4%BB%B6%E5%BA%93%E6%9E%84%E9%80%A0" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>组件库构造</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/6webrtc" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webrtc</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/9.wasm" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>wasm</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/11.webcomponent" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>webcomponent</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/front-base-know-blog/know/%E4%BC%98%E5%8C%96/12.pwa" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>pwa</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-pagefind-body data-v-f0b011de data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _front-base-know-blog_know_know_1html" data-v-c4b0d3cf><div><h1 id="_1-html-浏览器机制" tabindex="-1">1.HTML（浏览器机制） <a class="header-anchor" href="#_1-html-浏览器机制" aria-label="Permalink to &quot;1.HTML（浏览器机制）&quot;">​</a></h1><nav class="table-of-contents"><ul><li><a href="#_1-1基础知识">1.1基础知识</a><ul><li><a href="#_1-1-1-html5新属性">1.1.1 HTML5新属性</a></li><li><a href="#_1-1-2路由模式-三种">1.1.2路由模式（三种）</a></li><li><a href="#_1-1-3-浏览器渲染过程-dom-渲染过程-url输入">1.1.3 浏览器渲染过程 | dom 渲染过程 | url输入</a></li><li><a href="#_1-1-4-dom-document">1.1.4 DOM(document)</a></li><li><a href="#_1-1-5-v8引擎-丢到js里面了">1.1.5 V8引擎（丢到js里面了）</a></li><li><a href="#_1-1-6-事件循环机制">1.1.6 事件循环机制</a></li><li><a href="#_1-1-7-内存泄露">1.1.7 内存泄露</a></li><li><a href="#_1-1-8-noscript标签">1.1.8 noscript标签</a></li><li><a href="#_1-1-9-doctype">1.1.9 doctype</a></li><li><a href="#_1-1-10-状态码">1.1.10 状态码</a></li><li><a href="#_1-1-11-状态码-401-403-有什么区别-跳转登录用哪个">1.1.11 状态码 401/403 有什么区别？跳转登录用哪个？</a></li></ul></li><li><a href="#_1-2缓存">1.2缓存</a><ul><li><a href="#_1-2-1-强缓存-协商缓存">1.2.1 强缓存 | 协商缓存</a></li><li><a href="#_1-2-2-http缓存">1.2.2 http缓存</a></li></ul></li><li><a href="#_1-3-ajax-请求-http头-cors">1.3 ajax | 请求 | http头 | cors</a><ul><li><a href="#_1-3-1ajax-axios-fetch">1.3.1Ajax/Axios/fetch</a></li><li><a href="#_1-3-2跨域">1.3.2跨域</a></li><li><a href="#_1-3-3-常见-headers">1.3.3 常见 headers</a></li><li><a href="#_1-3-4get和post区别">1.3.4Get和Post区别</a></li></ul></li><li><a href="#_1-4-快问快答">1.4 快问快答</a></li><li><a href="#_1-5-浏览器调试">1.5 浏览器调试</a><ul><li><a href="#_1-5-1-dom断点">1.5.1 dom断点</a></li><li><a href="#_1-5-2-xhr断点">1.5.2 xhr断点</a></li><li><a href="#_1-5-3-定位内存泄漏">1.5.3 定位内存泄漏</a></li><li><a href="#_1-5-4-性能">1.5.4 性能</a></li><li><a href="#_1-5-5-事件断点">1.5.5 事件断点</a></li><li><a href="#_1-5-6-源代码中添加js">1.5.6 源代码中添加js</a></li></ul></li><li><a href="#_1-6-浏览器-js-css-兼容性">1.6 浏览器 | js | css | 兼容性</a><ul><li><a href="#_1-6-0-基础知识">1.6.0 基础知识</a></li><li><a href="#_1-6-1-css兼容性-浏览器">1.6.1 css兼容性（浏览器）</a></li><li><a href="#_1-6-2-js兼容性-浏览器">1.6.2 js兼容性（浏览器）</a></li></ul></li><li><a href="#_1-7-seo">1.7 seo</a><ul><li><a href="#_1-7-0-百度示例">1.7.0 百度示例</a></li><li><a href="#_1-7-1-meta头-tdk">1.7.1 meta头 | TDK</a></li><li><a href="#_1-7-2-pr算法">1.7.2 PR算法</a></li><li><a href="#_1-7-3-闪电算法">1.7.3 闪电算法</a></li><li><a href="#_1-7-4-页面识别难度">1.7.4 页面识别难度</a></li><li><a href="#_1-7-5-检测seo-seo指标">1.7.5 检测seo | seo指标</a></li><li><a href="#_1-7-6-域名等级">1.7.6 域名等级</a></li><li><a href="#_1-7-7-ssr-spa-不利于seo">1.7.7 SSR | SPA 不利于seo</a></li><li><a href="#_1-7-8-反向seo-减少网站服务器的负担">1.7.8 反向seo | 减少网站服务器的负担</a></li></ul></li><li><a href="#_1-8-无障碍">1.8 无障碍</a><ul><li><a href="#_1-8-1-语义化的作用">1.8.1 语义化的作用</a></li><li><a href="#_1-8-1-role">1.8.1 role</a></li><li><a href="#_1-8-2-关于表格-accessibility-aids">1.8.2 关于表格(accessibility aids)</a></li><li><a href="#_1-8-2-aria">1.8.2 aria</a></li><li><a href="#_1-8-5-读出指定的声音">1.8.5 读出指定的声音</a></li><li><a href="#_1-8-6-tabindex">1.8.6 tabindex</a></li><li><a href="#_1-8-7-aria-busy">1.8.7 aria-busy</a></li><li><a href="#_1-8-4-最佳实践">1.8.4 最佳实践</a></li></ul></li><li><a href="#_1-9-fetch示例">1.9 Fetch示例</a></li><li><a href="#_1-10-不同端口的cookies信息是否共享">1.10 不同端口的cookies信息是否共享</a></li><li><a href="#_1-11-csrf-xss-中间人攻击">1.11 csrf | xss | 中间人攻击</a></li></ul></nav><h2 id="_1-1基础知识" tabindex="-1">1.1基础知识 <a class="header-anchor" href="#_1-1基础知识" aria-label="Permalink to &quot;1.1基础知识&quot;">​</a></h2><h3 id="_1-1-1-html5新属性" tabindex="-1">1.1.1 HTML5新属性 <a class="header-anchor" href="#_1-1-1-html5新属性" aria-label="Permalink to &quot;1.1.1 HTML5新属性&quot;">​</a></h3><p>聋人的3D后台拖拽存储</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#F78C6C;">1.</span><span style="color:#A6ACCD;"> 8个语义标签：header</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> section</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> footer</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> aside</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> nav</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> main</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> article</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> figure</span></span>
<span class="line"><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> canvas画图，svg</span></span>
<span class="line"><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> localStorage，sessionStorage</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">indexofdb</span></span>
<span class="line"><span style="color:#F78C6C;">4.</span><span style="color:#A6ACCD;"> 媒体元素 video，audio</span></span>
<span class="line"><span style="color:#F78C6C;">5.</span><span style="color:#A6ACCD;"> 拖拽api，h5转语音api，contenteditable，maxlength，pattern等正则，required</span></span>
<span class="line"><span style="color:#F78C6C;">6.</span><span style="color:#A6ACCD;"> aria新特性（为了残疾人设置的）</span></span>
<span class="line"><span style="color:#F78C6C;">7.</span><span style="color:#A6ACCD;"> data</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">key </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> value语法糖  el</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dataset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">键可以进行取值</span></span>
<span class="line"><span style="color:#F78C6C;">8.</span><span style="color:#A6ACCD;">	tabIndex</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">username</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">www.baidu.com</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">-1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">注册账号</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">password</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">password</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">这样子可以通过键盘上面的tab键 进行切换。tabindex为0的时候，可以被聚焦，但是不能够被切换</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">9</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">input pattern（正则）</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">10</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">图片懒加载</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">shanyue.jpg</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">loading</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lazy</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#A6ACCD;">  IntersectionObserver</span></span></code></pre></div><p>语义化好处:</p><p>1.seo 2.代码逻辑</p><h3 id="_1-1-2路由模式-三种" tabindex="-1">1.1.2路由模式（三种） <a class="header-anchor" href="#_1-1-2路由模式-三种" aria-label="Permalink to &quot;1.1.2路由模式（三种）&quot;">​</a></h3><p>hash，history，abstruct（node模式的时候用）。前者是不需要在后端做配置是基于hash change也就是锚点链接的，切换的时候不会发送http请求。history是基于push stat和replacestate的，需要在后端做配置</p><h3 id="_1-1-3-浏览器渲染过程-dom-渲染过程-url输入" tabindex="-1">1.1.3 浏览器渲染过程 | dom 渲染过程 | url输入 <a class="header-anchor" href="#_1-1-3-浏览器渲染过程-dom-渲染过程-url输入" aria-label="Permalink to &quot;1.1.3  浏览器渲染过程 | dom 渲染过程 | url输入&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">浏览器的渲染分成两个阶段。有</span></span>
<span class="line"><span style="color:#82AAFF;">渲染主线程</span><span style="color:#A6ACCD;">(</span><span style="color:#82AAFF;">dom树</span><span style="color:#A6ACCD;">(html解析 parse) </span><span style="color:#82AAFF;">css树</span><span style="color:#A6ACCD;">(样式compute)，render树，layout，paint)</span></span>
<span class="line"><span style="color:#82AAFF;">和合成线程</span><span style="color:#A6ACCD;">(分块 tiling </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 光栅化 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> draw)</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">输入url 和 浏览器渲染过程 不一样 。 前者要加上取得数据的方式</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">简单来说有三层 第一层是初始化 第二层是计算机 第三层是css层面的解析</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">第一步：解析URL，确定了 Web 服务器和⽂件名</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//会话层 表示层挂机</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//2.传输层（tcp，udp连接）</span></span>
<span class="line"><span style="color:#A6ACCD;">第二步：应用层（dns解析</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">本地DNS</span><span style="color:#89DDFF;">-&gt;</span><span style="color:#A6ACCD;">本地DNS缓存中没有就去找根域名服务器然后逐级上找），这里我们获取了ip（cdn）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">第三步：传输层 添加tcp头部 http，https协议的底层tcp3次握手</span><span style="color:#89DDFF;">-</span><span style="color:#82AAFF;">流量控制</span><span style="color:#A6ACCD;">(通信双⽅各声明⼀个缓存⼤⼩的窗口)</span><span style="color:#89DDFF;">-</span><span style="color:#82AAFF;">拥塞控制</span><span style="color:#A6ACCD;">(就是控制⾃⼰，也即控制发送的速度。不能改变世界，就改变⾃⼰嘛)</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">状态位（SYN 是发起⼀个连接， ACK 是回复， RST 是新连接， FIN 是结束连接等）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">第四步：网络层：委托 IP 模块将数据封装成⽹络包发送给通信对象</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">第五步：网络接口层：进行最终的数据传输</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">第六步：HTML 分析器解析html，构建DOM树  </span><span style="color:#676E95;font-style:italic;">//从上往下读取html标签+碰到js 可以通过把script放在底部</span></span>
<span class="line"><span style="color:#A6ACCD;">第七步：CSS 分析器解析CSS，stylesheet  </span><span style="color:#676E95;font-style:italic;">//字面意思</span></span>
<span class="line"><span style="color:#A6ACCD;">第八步：合并dom树和css规则树，生成render渲染树 </span><span style="color:#676E95;font-style:italic;">// dom树和cssom树相结合，成为一颗新的渲染树 render tree</span></span>
<span class="line"><span style="color:#A6ACCD;">第九步：</span><span style="color:#82AAFF;">根据render渲染树进行布局</span><span style="color:#A6ACCD;">(Layout)</span></span>
<span class="line"><span style="color:#A6ACCD;">第十步：调用GPU对渲染树进行绘制，合成图层，显示在屏幕上（Painting）</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//其中第四步和第五步合起来，就是我们常常说的浏览器渲染，并且第四步和第五步是浏览器渲染最耗时的部分（主要优化点）.</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//回流（Reflow）,回流会让浏览器重新执行第四步和第五步的操作</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//重绘（Repaint）,重绘会让浏览器重新执行第五步的操作</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">这里说一下html 的语法解释器，这是牛皮的。一共有三个过程 </span></span>
<span class="line"><span style="color:#A6ACCD;">lexical analysis（语法分析，扫描器）：按类别提取并保存到线性表</span></span>
<span class="line"><span style="color:#A6ACCD;">tokenize（分析规则）：识别出 HTML 应用的节点层级关系并将其填装到一个对象中</span></span>
<span class="line"><span style="color:#A6ACCD;">parse analysis（变成ast）：变成ast或者反向解析，这里随便啦</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//优化方案</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//1.在合适的时机选择使用Load或者DOMContentLoaded</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//2.使用不同的图层来渲染页面 translate代替left的平移什么的 | position: fixed</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//3.不要使用 js 代码对dom 元素设置多条样式，选择用一个 className</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//4.硬件加速。-webkit-transform transform: translateZ(0) 欺骗浏览器</span></span></code></pre></div><h3 id="_1-1-4-dom-document" tabindex="-1">1.1.4 DOM(document) <a class="header-anchor" href="#_1-1-4-dom-document" aria-label="Permalink to &quot;1.1.4 DOM(document)&quot;">​</a></h3><h4 id="_1-1-4-1-事件流" tabindex="-1">1.1.4.1 事件流 <a class="header-anchor" href="#_1-1-4-1-事件流" aria-label="Permalink to &quot;1.1.4.1  事件流&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">DOM0级事件模型只支持冒泡，不支持捕获，同一事件只能绑定一个执行函数（用onclick函数绑定）</span></span>
<span class="line"><span style="color:#A6ACCD;">DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。可以绑定多个执行函数。虽然捕获阶段规定不允许响应事件，但实际上还是会执行，所以有两次机会获取到对象。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//DOM2级事件绑定与解除，useCapture默认是false，也就是在冒泡阶段调用handler函数</span></span>
<span class="line"><span style="color:#82AAFF;">addEventListener</span><span style="color:#A6ACCD;">(eventType</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> handler</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> useCapture) </span><span style="color:#676E95;font-style:italic;">//stopPropagation阻止冒泡，preventDefault取消默认行为</span></span>
<span class="line"><span style="color:#82AAFF;">removeEventListener</span><span style="color:#A6ACCD;">(eventType</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> handler</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> useCapture)</span></span></code></pre></div><h4 id="_1-1-4-2-事件委托" tabindex="-1">1.1.4.2 事件委托 <a class="header-anchor" href="#_1-1-4-2-事件委托" aria-label="Permalink to &quot;1.1.4.2 事件委托&quot;">​</a></h4><p>利用事件冒泡处理动态元素事件绑定的方法，简单来说给父元素绑定事件来监听子元素冒泡事件。好处是不用对每个子元素添加事件监听，减少DOM操作从而提高性能。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">//事件回调函数中的参数e</span></span>
<span class="line"><span style="color:#A6ACCD;">例如在点击事件中，绑定的执行函数会自动有参数e传入，</span></span>
<span class="line"><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target是事件的触发对象，</span></span>
<span class="line"><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">currentTarget是事件绑定对象</span><span style="color:#A6ACCD;">(事件委托中一般是父)。因为存在冒泡，所以可能点击的是A组件的子组件B但是触发了A组件的点击事件。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//常见操作</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 但是没有文本</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createTextNode</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">text</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 前提是要有个div</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.element</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">) </span><span style="color:#676E95;font-style:italic;">// 传入任何css选择器，返回首个</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelectorAll</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.element</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 每个DOM元素有parentNode, childNodes, firstChild, lastChild, nextSibling, previousSibling属性</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 更新节点：innerHTML, innerText(不返回隐藏元素的文本), textContent, style</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 增减节点：appendChild添加到父节点的最后一个子节点，removeChild把自己从父节点中删掉</span></span></code></pre></div><h3 id="_1-1-5-v8引擎-丢到js里面了" tabindex="-1">1.1.5 V8引擎（丢到js里面了） <a class="header-anchor" href="#_1-1-5-v8引擎-丢到js里面了" aria-label="Permalink to &quot;1.1.5 V8引擎（丢到js里面了）&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">Google 开源的 用c++写的JavaScript 引擎：V8 将程序员写的代码，最终解析成机器码能够让计算机识别</span></span></code></pre></div><h3 id="_1-1-6-事件循环机制" tabindex="-1">1.1.6 事件循环机制 <a class="header-anchor" href="#_1-1-6-事件循环机制" aria-label="Permalink to &quot;1.1.6 事件循环机制&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">浏览器的事件循环机制和Node</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">js不一样，要区分开来。浏览器的事件循环机制是先执行主程序代码，然后因为主程序属于宏任务，这时候每执行完一个宏任务（setTimeout、setInterval、setImmediate）就去看微任务（process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">nextTick和promise</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">then）队列里是否否是空，如果不为空就等微任务队列执行完了再执行宏任务队列的下一个宏任务。注意：Promise构造函数中的resolve和reject函数参数是属于主线程要执行的。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//其中vue2的事件循环是不一样的，process.nextTick毫无疑问是一个微任务，vue2会根据版本决定是微任务还是微任务+宏任务</span></span></code></pre></div><h3 id="_1-1-7-内存泄露" tabindex="-1">1.1.7 内存泄露 <a class="header-anchor" href="#_1-1-7-内存泄露" aria-label="Permalink to &quot;1.1.7 内存泄露&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">是指内存没有被回收，js是一种垃圾回收语言，通过周期性检查先前分配的内存是否可达来帮助开发者管理内存。</span></span>
<span class="line"><span style="color:#A6ACCD;">内存管理的算法例如标记清除法：在标识阶段标记所有的可访问对象，在收集阶段扫描并回收所有的未标记对象。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 意外的全局变量</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
<span class="line"><span style="color:#A6ACCD;">相当于</span></span>
<span class="line"><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">foo</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">a</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#82AAFF;">foo</span><span style="color:#A6ACCD;">()</span></span>
<span class="line"><span style="color:#A6ACCD;">导致</span></span>
<span class="line"><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">防范办法是在js文件头部加上use strict，启用严格模式</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 被遗忘的计时器和闭包</span></span>
<span class="line"><span style="color:#A6ACCD;">尤其是牵扯到DOM对象的引用</span></span></code></pre></div><h3 id="_1-1-8-noscript标签" tabindex="-1">1.1.8 noscript标签 <a class="header-anchor" href="#_1-1-8-noscript标签" aria-label="Permalink to &quot;1.1.8 noscript标签&quot;">​</a></h3><p>不能显示javascript显示的</p><h3 id="_1-1-9-doctype" tabindex="-1">1.1.9 doctype <a class="header-anchor" href="#_1-1-9-doctype" aria-label="Permalink to &quot;1.1.9 doctype&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.</span></span>
<span class="line"><span style="color:#A6ACCD;">主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">1严格模式</span><span style="color:#89DDFF;">&lt;!</span><span style="color:#A6ACCD;">DOCTYPE html</span><span style="color:#89DDFF;">&gt;-</span><span style="color:#A6ACCD;">h5</span></span>
<span class="line"><span style="color:#A6ACCD;">又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">2</span><span style="color:#82AAFF;">混杂模式</span><span style="color:#A6ACCD;">(没有声明DOCTYPE</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">默认就是这个模式)</span></span>
<span class="line"><span style="color:#A6ACCD;">又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，不同浏览器在怪异模式下的处理也是不同的</span></span></code></pre></div><h3 id="_1-1-10-状态码" tabindex="-1">1.1.10 状态码 <a class="header-anchor" href="#_1-1-10-状态码" aria-label="Permalink to &quot;1.1.10 状态码&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#A6ACCD;">1XX </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 信息性状态码，请求正在处理 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#F78C6C;">200</span><span style="color:#A6ACCD;">(请求被正常处理了) </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">204</span><span style="color:#A6ACCD;">(请求成功处理，但是返回空内容)</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#F78C6C;">301</span><span style="color:#A6ACCD;"> （永久重定向，比如域名变更） </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">302</span><span style="color:#A6ACCD;"> （临时重定向，比如登录跳转） </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">307</span><span style="color:#A6ACCD;">（HSTS中</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">可以被缓存</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">继续重定向到https）</span></span>
<span class="line"><span style="color:#F78C6C;">304</span><span style="color:#A6ACCD;">（协商缓存命中 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 没有命中是200的状态码）  </span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">4.</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#F78C6C;">400</span><span style="color:#A6ACCD;">（请求语法错误 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 泛指）</span></span>
<span class="line"><span style="color:#F78C6C;">401</span><span style="color:#A6ACCD;">(请求需要认证 Unauthorized) </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> header传值，证书之类的</span></span>
<span class="line"><span style="color:#F78C6C;">403</span><span style="color:#A6ACCD;"> （服务器拒绝访问，比如没权限）  </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 禁止读取访问的js </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> ssl </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> 太忙</span></span>
<span class="line"><span style="color:#F78C6C;">404</span><span style="color:#A6ACCD;">（请求资源不存在）</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">5.</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"><span style="color:#F78C6C;">500</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 服务器错误，可能是服务器有bug或临时故障  </span></span>
<span class="line"><span style="color:#F78C6C;">502</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 网关出错</span></span>
<span class="line"><span style="color:#F78C6C;">503</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 服务器繁忙</span></span></code></pre></div><h3 id="_1-1-11-状态码-401-403-有什么区别-跳转登录用哪个" tabindex="-1">1.1.11 状态码 401/403 有什么区别？跳转登录用哪个？ <a class="header-anchor" href="#_1-1-11-状态码-401-403-有什么区别-跳转登录用哪个" aria-label="Permalink to &quot;1.1.11 状态码 401/403 有什么区别？跳转登录用哪个？&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">状态码 </span><span style="color:#F78C6C;">401</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">403</span><span style="color:#A6ACCD;"> 有什么区别？跳转登录用哪个？（</span><span style="color:#F78C6C;">403</span><span style="color:#A6ACCD;"> 已经携带了鉴权信息，只是没有鉴权通过，forbidden，即使再跳转登录页也无法登录，</span><span style="color:#F78C6C;">401</span><span style="color:#A6ACCD;"> 代表 Unauthorized，即没有获取到鉴权信息，这个时候应该跳转登录页）</span></span></code></pre></div><h2 id="_1-2缓存" tabindex="-1">1.2缓存 <a class="header-anchor" href="#_1-2缓存" aria-label="Permalink to &quot;1.2缓存&quot;">​</a></h2><h3 id="_1-2-1-强缓存-协商缓存" tabindex="-1">1.2.1 强缓存 | 协商缓存 <a class="header-anchor" href="#_1-2-1-强缓存-协商缓存" aria-label="Permalink to &quot;1.2.1 强缓存 | 协商缓存&quot;">​</a></h3><ol><li>http缓存 通过expires时间戳（http1.0产物）或cache-control时间长度（http1.1产物）判断强缓存是否可用，如果不可用进入协商缓存阶段。如果服务器资源没更新，那么返回304，客户端继续使用缓存获取资源。如果服务器资源更新了，那么返回200和资源。 http1.0的缓存机制在http1.1中也可以使用。但是http1.1的缓存机制优先级是高于http1.0的。</li><li>http1.0协商缓存 通过客户端的if-modified-since和服务端的last-modified来检查资源是否更新。客户端的if-modified-since是第一次请求资源用last-modified赋予的时间戳。</li><li>http1.1协商缓存 通过if-None-Match和Etags一起使用，用来判断资源是否更新。Etags是对文件内容进行md5加密的密文。</li><li>last-modified的局限 时间戳可能因为时区不一样而产生误差 last-modified无法解决文件被频繁修改，但文件内容未被修改的场景，所以提出基于文件内容加密的Etags</li><li>200 from disk cache 和 304 的 区别</li></ol><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">强缓存和协商缓存？（强缓存直接。使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 </span><span style="color:#F78C6C;">304</span><span style="color:#A6ACCD;"> 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源 ）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。</span></span>
<span class="line"><span style="color:#A6ACCD;">强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Control 属性。协商缓存会判断e</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">tag和last</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">modidy</span></span></code></pre></div><h3 id="_1-2-2-http缓存" tabindex="-1">1.2.2 http缓存 <a class="header-anchor" href="#_1-2-2-http缓存" aria-label="Permalink to &quot;1.2.2 http缓存&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span></span>
<span class="line"><span style="color:#A6ACCD;">cookies</span></span>
<span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">自动发给服务器</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">服务端可操作cookie</span></span>
<span class="line"><span style="color:#F78C6C;">3.</span><span style="color:#A6ACCD;"> 大小只有4KB</span></span>
<span class="line"><span style="color:#F78C6C;">4.</span><span style="color:#A6ACCD;"> 作用域为域</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">路径</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//1.怎么去删除一个cookies</span></span>
<span class="line"><span style="color:#A6ACCD;">max</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">age</span><span style="color:#89DDFF;">=-</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> 或者把过期时间设置成现在</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span></span>
<span class="line"><span style="color:#A6ACCD;">localstorage 和 session </span></span>
<span class="line"><span style="color:#A6ACCD;">相同点是存储本地、更大存储空间、服务端无法操作，作用域为同源的域。不同点是session关闭就没了</span></span></code></pre></div><h2 id="_1-3-ajax-请求-http头-cors" tabindex="-1">1.3 ajax | 请求 | http头 | cors <a class="header-anchor" href="#_1-3-ajax-请求-http头-cors" aria-label="Permalink to &quot;1.3 ajax | 请求 | http头 |  cors&quot;">​</a></h2><h3 id="_1-3-1ajax-axios-fetch" tabindex="-1">1.3.1Ajax/Axios/fetch <a class="header-anchor" href="#_1-3-1ajax-axios-fetch" aria-label="Permalink to &quot;1.3.1Ajax/Axios/fetch&quot;">​</a></h3><ol><li><p>Ajax AJAX是一种创建交互式网页的开发技术，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JS操作DOM更新页面。 open函数建立连接，send函数发送数据，onreadystatechange事件监听通信状态</p></li><li><p>Axios 本质是promise对xmlhttpRequest(XHR对象）的封装</p></li><li><p>axios的封装 每次发起HTTP请求都要设置超时时间、请求头、请求地址、错误处理等，代码就很冗余。可以设置请求拦截器、响应拦截器等对axios进行二次封装。</p></li><li><p>fetch</p><p>本质是promoise的封装.fetch发送两次请求，第一次是option请求，询问能否跨域，第二次才是真正的请求。</p></li></ol><h3 id="_1-3-2跨域" tabindex="-1">1.3.2跨域 <a class="header-anchor" href="#_1-3-2跨域" aria-label="Permalink to &quot;1.3.2跨域&quot;">​</a></h3><p>浏览器中，协议、域名和端口有一个不一样就是不同的域。</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">跨域资源共享CORS（Cross-Origin Resource Sharing）：简单请求只要满足请求方法是HEAD\GET\POST并且header的 Accept 正常和Content-Type是application/x-www-form-urlencoded的情况</span></span></code></pre></div><p>跨域资源共享CORS 分为简单请求和非简单请求。简单请求只要满足请求方法是HEAD\GET\POST并且请求头不超过Accept,Accept-Language,Content-Language,Last-Event-ID,Content-Type（(只限于application/x-www-form-urlencoded, multipart/form-data, text/plain）。这是为了兼容表单，因为历史上表单一直可以发跨域请求。简单请求，ajax的请求头会加一个origin字段服务器根据这个值决定是否同意，</p><p>不同意的话响应的头信息没有包含Access-Control-Allow-Origin字段，就会报错，如果同意会多三个以Access-Control-开头的字段。cors默认不发送cookie，如果要发服务器需要指定Access-Control-Allow-Credentials，并且ajax请求打开withCredentials属性。需要注意的是，如果发送cookie，Access-Control-Allow-Origin不能设置星号，必须指明域名。 对于非简单请求，比如请求方法是PUT，DELETE或者Content-Type是application/json，在cors请求前会先进行预检请求（OPTIONS请求）询问服务器是否能跨域访问，预检请求关键字段是Origin，还有请求方法和逗号分开的请求头字段。 \5. jsonp跨域 因为script标签是不受跨域限制的，所以在jquery时代都用jsonp解决跨域问题。jsonp是程序员的奇思妙想，要点是把一个callback回调函数作为Get请求的参数传给服务器，然后服务器是可以从数据库取数据的，取出来的数据作为这个函数的输入参数，再把这个有输入参数的函数返回给客户端，客户端会自动执行这个函数去更新DOM。 \6. postmessage可以向另一个window对象发送消息，常用于和iframe的跨域</p><h3 id="_1-3-3-常见-headers" tabindex="-1">1.3.3 常见 headers <a class="header-anchor" href="#_1-3-3-常见-headers" aria-label="Permalink to &quot;1.3.3 常见 headers&quot;">​</a></h3><h4 id="_1-3-3-1-x-www-form-urlencoded和application-json的区别" tabindex="-1">1.3.3.1 x-www-form-urlencoded和application/json的区别： <a class="header-anchor" href="#_1-3-3-1-x-www-form-urlencoded和application-json的区别" aria-label="Permalink to &quot;1.3.3.1 x-www-form-urlencoded和application/json的区别：&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">application/x-www-form-urlencoded接收get和post的form表单 </span></span>
<span class="line"><span style="color:#A6ACCD;">get的时候append后面去 </span></span>
<span class="line"><span style="color:#A6ACCD;">post的时候http body </span></span>
<span class="line"><span style="color:#A6ACCD;">最后都会变成key1=value1&amp;key2=value2的方式发送到服务器。如果用Jquery，它内部已经进行了处理，如果自己写原生的Ajax请求，就需要自己对数据进行序列化</span></span></code></pre></div><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">这玩意不会暴露</span></span>
<span class="line"><span style="color:#A6ACCD;">application/json 这个时候接收的是json  </span></span>
<span class="line"><span style="color:#A6ACCD;">后端会拿到json</span></span></code></pre></div><p>application/json 这个时候接收的是json</p><h4 id="_1-3-3-3-request-header" tabindex="-1">1.3.3.3 request header <a class="header-anchor" href="#_1-3-3-3-request-header" aria-label="Permalink to &quot;1.3.3.3 request header&quot;">​</a></h4><p>总结一下：公用的是Cache-Control和Connection。不同的主要有三点</p><p>1.request头考虑接收所以字段是accept（0），reponse头考虑的是发送的方式（1）</p><p>2.响应头 缓存相关的是 Expires ETag</p><p>3.g-zip相关的，request的是accept-Encoding ，reponse头是content-Encoding</p><table><thead><tr><th>header名字</th><th>说明</th><th style="text-align:center;">参数</th></tr></thead><tbody><tr><td>Accept</td><td>回发类型</td><td style="text-align:center;">application/json</td></tr><tr><td>Accept-Encoding:</td><td></td><td style="text-align:center;">gzip, deflate</td></tr><tr><td>Accept-language</td><td></td><td style="text-align:center;">ZH-CN</td></tr><tr><td>Cache-Control</td><td>缓存机制</td><td style="text-align:center;">no-cache，max-age=10</td></tr><tr><td>Connection</td><td>是否持久连接</td><td style="text-align:center;">keep-alive</td></tr><tr><td>Cookie</td><td>存储</td><td style="text-align:center;">name, value, domain, httpOnly, secure等属性</td></tr><tr><td>Content-Type</td><td>请求内容格式</td><td style="text-align:center;">application/json(ajax),,application/form-urlencoded(表单传输),multipart/form-data(文件传输)</td></tr><tr><td></td><td></td><td style="text-align:center;"></td></tr></tbody></table><h4 id="_1-3-3-4-reponse-header" tabindex="-1">1.3.3.4 reponse header <a class="header-anchor" href="#_1-3-3-4-reponse-header" aria-label="Permalink to &quot;1.3.3.4 reponse header&quot;">​</a></h4><table><thead><tr><th>header名字</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>Allow</td><td>回发的类型</td><td>POST,GET,OPTIONS</td></tr><tr><td>Cache-Control</td><td>缓存机制</td><td>no-cache，max-age=10</td></tr><tr><td>Connection</td><td>是否持久连接</td><td>keep-alive</td></tr><tr><td>Expires</td><td>资源过期时间</td><td>Expires: 2021 12:52:51 GMT</td></tr><tr><td>ETag</td><td>资源标识符</td><td>ETag: &quot;dcwq989&quot;</td></tr><tr><td>content-Encoding</td><td>编码方法</td><td>gzip, deflate</td></tr><tr><td>Access-control-allow-origin</td><td></td><td>*</td></tr></tbody></table><p>allow</p><p>allow-origin</p><p>request是</p><h4 id="_1-3-3-5-请求方法" tabindex="-1">1.3.3.5 请求方法 <a class="header-anchor" href="#_1-3-3-5-请求方法" aria-label="Permalink to &quot;1.3.3.5 请求方法&quot;">​</a></h4><p>GET：获取资源 POST：传输实体主体 PUT：传输文件，“幂等性”（多次传输和一次传输是等效的） HEAD：获取报文首部，和GET一样但是没有报文主体 DELETE：删除文件，和PUT一样因为HTTP1.1不会验证，所以很少使用 OPTIONS：询问支持（verbs）的方法 TRACE：跟踪所有处理过该请求的服务器 CONNECT：与代理服务器通信时建立隧道进行TCP通信，通常使用SSL和TLC协议加密传输</p><ol><li>RESTFUL 用url定位资源，用http描述操作的一种设计风格 目前主流三种Web服务交互方案中，REST比SOAP以及XML-RPC更加简单明了。</li><li>token原理和时效性 将荷载payload、header进行base64加密分别形成密文，然后用句号连接起来，用服务端秘钥记性HS256加密，生成签名，这就是token，返回给服务器。服务器解密后可以知道荷载中的授权时间以及有效期，从而与当前时间判断是否过期</li><li>鉴权机制 <strong>session-cokie</strong>:cookie用来标识浏览器，第一次请求得到的响应会被服务器设置set-cookie，之后浏览器就会设置cookie并存储，之后浏览器请求自动带上cookie。而session也是服务器创建的，只不过会缓存在服务端，用来标识浏览器。 <strong>token</strong>是一个令牌，一般由用户信息，时间戳和签名构成。token和session区别在于token认证不局限于客户端，而cookie只能存在浏览器。cookie有csrf风险，token不需要在服务器存储，服务器只需要校验token是否合法即可。 <strong>JWT</strong>(Json Web Token)由后端将荷载（Payload)和请求头（Header）base64位编码后和签名拼成<code>xxx.yyy.zzz</code>的格式，然后再加密生成token存在cookie里。此后再发起请求时，一般是放在Authorization请求头里发送给服务器，服务器会进行token的验证。 <strong>Oauth2.0</strong>是一种第三方授权的协议。以码云第三方登录为例，首先当用户点击码云登录按钮时，在前端或者后端响应一个重定向地址到码云，这个地址要带上事先码云分配的客户端id和登录成功后的重定向地址，这个地址一般是由自己的服务器响应的。其次，用户在码云登录页面输入用户名密码并勾选授权成功登录后，码云服务器响应客户端一个重定向地址，这个地址带着授权码，这个重定向地址一般是自己的服务器响应的，服务器响应请求，因为可以获得解析请求中的授权码，这时候服务器可以用这个授权码去请求码云获得token，然后用这个token再去获得用户名等信息。</li></ol><h3 id="_1-3-4get和post区别" tabindex="-1">1.3.4Get和Post区别 <a class="header-anchor" href="#_1-3-4get和post区别" aria-label="Permalink to &quot;1.3.4Get和Post区别&quot;">​</a></h3><p>get把参数放在url中，post通过request body传递参数。 get在浏览器回退时是无害的，post会再次提交请求。 get传输大小有限制，post无限制。 <strong>注意：网传get暴露参数所以不安全，其实post也可以通过抓包获取数据，属于防君子不防小人。另外还说post发两个包所以慢，也是错的，post和get一样只发一个tcp包。</strong></p><h2 id="_1-4-快问快答" tabindex="-1">1.4 快问快答 <a class="header-anchor" href="#_1-4-快问快答" aria-label="Permalink to &quot;1.4 快问快答&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">Vue2作为SPA不利于seo，如何解决？</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//在Vue中可以利用SSR服务端渲染，通过服务器生成html返回给浏览器，Vue3就是如此。</span></span>
<span class="line"><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> Doctype有啥用？</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//这玩意就是定义用什么方式来解析文档。分为严格模式和混杂模式</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">ssr和spa的区别？</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//服务端渲染Server-Side Rendering简称SSR，在前后端不分离的时代，由后端返回一个HTML文档给客户端。Vue是SPA单页面应用（single），方便前后端工程师分工协作，通过JSON传输数据。SPA首次加载慢，但是后面就快了，因为用户操作只是部分组件的变化，不用整个页面重新更新渲染。</span></span>
<span class="line"><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">iframe的缺点？</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//iframe元素会创建包含另一个文档的内联框架，缺点是会阻塞主页面的onload事件（文档加载后触发onload事件执行js脚本），不利于SEO，iframe和主页面共享连接池从而影响性能</span></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">canvas和svg的区别</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//svg是基于XML的，这表明每个节点都可用，都可以添加事件。canvas是用js绘制图形的，绘制完浏览器将不再关注它，如果位置变化需要重新绘制，只能给整个画布添加事件。</span></span>
<span class="line"><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">script标签中的async和defer属性</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码。</span></span></code></pre></div><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dom中有10个节点 渲染树中的节点会是10个吗？</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//不是的，渲染树不包括 head 和隐藏元素（更少的原因），这个问题换一个说法就是渲染树和dom树不一样</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">CSS会阻塞DOM解析吗？</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//对于一个HTML文档来说，不管是内联还是外链的css，都会阻碍后续的dom渲染，但是不会阻碍后续dom的解析。当css文件放在中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。js会阻塞渲染</span></span></code></pre></div><h2 id="_1-5-浏览器调试" tabindex="-1">1.5 浏览器调试 <a class="header-anchor" href="#_1-5-浏览器调试" aria-label="Permalink to &quot;1.5  浏览器调试&quot;">​</a></h2><h3 id="_1-5-1-dom断点" tabindex="-1">1.5.1 dom断点 <a class="header-anchor" href="#_1-5-1-dom断点" aria-label="Permalink to &quot;1.5.1 dom断点&quot;">​</a></h3><p>在元素消失或者是发生变化的时候快速定位</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">f12后在element的具体代码行数右键，</span><span style="color:#89DDFF;font-style:italic;">break</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">on</span><span style="color:#A6ACCD;"> 把三个断点都打上。如果发生变化会直接跳到我们的source方法中去</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">我们如果是在vue或者是react中，那么可能定义的断点的源码中，因此我们在旁边找到call stack这个东西，向上找</span></span></code></pre></div><h3 id="_1-5-2-xhr断点" tabindex="-1">1.5.2 xhr断点 <a class="header-anchor" href="#_1-5-2-xhr断点" aria-label="Permalink to &quot;1.5.2 xhr断点&quot;">​</a></h3><p>定位请求发起的位置</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">首先来到network，筛选出xhrrequest地址</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">然后我们根据这个在sources里面的xhr</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">fetch Breakpoints添加格式类似于</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">getDetail。</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">然后定位到断点我们看call stack就可以了</span></span></code></pre></div><h3 id="_1-5-3-定位内存泄漏" tabindex="-1">1.5.3 定位内存泄漏 <a class="header-anchor" href="#_1-5-3-定位内存泄漏" aria-label="Permalink to &quot;1.5.3 定位内存泄漏&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shift</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">ctrl</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">p打开搜索，输入monitor。选择show performance monitor，我们主要看js head size，如果要切换tab的时候，这个参数一直在增加，那么我们可以怀疑可能有内存泄漏</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">打开Memory，然后把Allocation instrumentation on timeline（按照时间线来看）给打开。我们点击end之后可以看到内存条，内存条中有一些constructor，找大的分析就可以了</span></span>
<span class="line"><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">最好用settimeout来调试（把代码都放进去）</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">或者permonce 录制一下，然后拼命刷新，查看closure</span></span></code></pre></div><h3 id="_1-5-4-性能" tabindex="-1">1.5.4 性能 <a class="header-anchor" href="#_1-5-4-性能" aria-label="Permalink to &quot;1.5.4  性能&quot;">​</a></h3><h4 id="_1-5-4-1-performance-insights" tabindex="-1">1.5.4.1 performance insights <a class="header-anchor" href="#_1-5-4-1-performance-insights" aria-label="Permalink to &quot;1.5.4.1 performance insights&quot;">​</a></h4><p>我们主要关注三个指标</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">FCP(first content paint):</span></span>
<span class="line"><span style="color:#A6ACCD;">LCP(large content paint):在detail中可以看出哪一个element耗时最多</span></span>
<span class="line"><span style="color:#A6ACCD;">DCL(dom content loaded):DOMContentLoaded 时DOM解析完触发的没有渲染。defer会阻塞，async不会阻塞</span></span></code></pre></div><h4 id="_1-5-4-2-performance-insights" tabindex="-1">1.5.4.2 performance insights <a class="header-anchor" href="#_1-5-4-2-performance-insights" aria-label="Permalink to &quot;1.5.4.2 performance insights&quot;">​</a></h4><h4 id="_1-5-4-3-performance" tabindex="-1">1.5.4.3 performance <a class="header-anchor" href="#_1-5-4-3-performance" aria-label="Permalink to &quot;1.5.4.3 performance&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">点了录制开始和结束之后。</span></span>
<span class="line"><span style="color:#A6ACCD;">还可以看 reflow 和 paint 时间</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">调试的时间轴：</span></span>
<span class="line"><span style="color:#A6ACCD;">step1：最上面是fps，如果是红色，那么就有性能问题</span></span>
<span class="line"><span style="color:#A6ACCD;">step2：然后我们可以看到main 下面的 summary。可能会有导致这个问题的文件。有红色三角形的地方</span></span></code></pre></div><h3 id="_1-5-5-事件断点" tabindex="-1">1.5.5 事件断点 <a class="header-anchor" href="#_1-5-5-事件断点" aria-label="Permalink to &quot;1.5.5 事件断点&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">shift</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">ctrl</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">p打开搜索</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">搜索show event listener</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">mouse中我们给click打入断点就可以了</span></span></code></pre></div><h3 id="_1-5-6-源代码中添加js" tabindex="-1">1.5.6 源代码中添加js <a class="header-anchor" href="#_1-5-6-源代码中添加js" aria-label="Permalink to &quot;1.5.6 源代码中添加js&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">source中选择overrides，然后选择一个文件夹</span></span>
<span class="line"><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">就可以在任意文件夹中添加alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">dsad</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">add</span><span style="color:#89DDFF;">(){</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">alert</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">add</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="_1-6-浏览器-js-css-兼容性" tabindex="-1">1.6 浏览器 | js | css | 兼容性 <a class="header-anchor" href="#_1-6-浏览器-js-css-兼容性" aria-label="Permalink to &quot;1.6 浏览器 |  js  |  css |  兼容性&quot;">​</a></h2><p>终极解决方法：</p><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">alert non-Chrome &amp; dogs access denied 然后window.close 或者 加一下polyfill</span></span></code></pre></div><h3 id="_1-6-0-基础知识" tabindex="-1">1.6.0 基础知识 <a class="header-anchor" href="#_1-6-0-基础知识" aria-label="Permalink to &quot;1.6.0 基础知识&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css </span><span style="color:#FFCB6B;">hack</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">针对不同的浏览器情景来应用不同的CSS</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">兼容性跟doctype的声明息息相关。例如我们声明doc默认就是严格模式，这个时候document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scrollTop会生效。不声明doc默认就是混合模式，document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scrollTop会生效，由于这两个属性只会生效一个，因此如果我们想要准确获取下拉的值我们就可以将document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scrollTop</span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">scrollTop加起来</span></span></code></pre></div><h3 id="_1-6-1-css兼容性-浏览器" tabindex="-1">1.6.1 css兼容性（浏览器） <a class="header-anchor" href="#_1-6-1-css兼容性-浏览器" aria-label="Permalink to &quot;1.6.1 css兼容性（浏览器）&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css Reflections只有safafi和chrome才能支持。opera和firebox都是不支持的</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css transforms 3d opera不支持</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">pointer events只有opera不支持</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">4</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css </span><span style="color:#FFCB6B;">hack</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">针对不同的浏览器情景来应用不同的CSS。(其实大家都不是很推荐)</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">Hack大致有3种表现形式，CSS属性前缀法（兼容性相当差）、选择器前缀法以及IE条件注释法</span></span>
<span class="line"><span style="color:#A6ACCD;">IE条件注释法示例如下</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;">[if IE]</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    这段文字只在IE浏览器显示</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;!</span><span style="color:#A6ACCD;">[endif]</span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">选择器前缀法：</span></span>
<span class="line"><span style="color:#A6ACCD;">background</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">color</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> blue </span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">/* firefox */</span></span>
<span class="line"><span style="color:#A6ACCD;">background</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">color</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red\</span><span style="color:#F78C6C;">9</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">        </span><span style="color:#676E95;font-style:italic;">/* all ie */</span></span>
<span class="line"><span style="color:#A6ACCD;">background</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">color</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> yellow\</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">/* ie8 */</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;">background</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">color</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink </span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">          </span><span style="color:#676E95;font-style:italic;">/* ie7 */</span></span>
<span class="line"><span style="color:#A6ACCD;">_background</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">color</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> orange </span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">         </span><span style="color:#676E95;font-style:italic;">/* ie6 */</span></span>
<span class="line"><span style="color:#A6ACCD;">下面附加具体的规则</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">图片</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span></span>
<span class="line"><span style="color:#A6ACCD;">5</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css </span><span style="color:#FFCB6B;">hack</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">原则上是优先级高的在前面</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">6</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">不同浏览器的标签默认的内外边距不同，用reset</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css之类的可以改变</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">7</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">在Chrome中字体不能小于10px。solution：font</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> 12px</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">transform</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">scale</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0.8</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><img src="/front-base-know-blog/assets/hack.f10b86c4.jpg"><h3 id="_1-6-2-js兼容性-浏览器" tabindex="-1">1.6.2 js兼容性（浏览器） <a class="header-anchor" href="#_1-6-2-js兼容性-浏览器" aria-label="Permalink to &quot;1.6.2 js兼容性（浏览器）&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">e兼容火狐浏览器，window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">event兼容非火狐</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onclick</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#89DDFF;">){</span></span>
<span class="line"><span style="color:#89DDFF;">     </span><span style="color:#676E95;font-style:italic;">//var e = e||window.event;  </span></span>
<span class="line"><span style="color:#F07178;">     </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">e</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">clientX</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">clientX</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">2.</span><span style="color:#A6ACCD;"> 在DTD已声明的情况下用documentElement，未声明的情况下用body</span></span></code></pre></div><h2 id="_1-7-seo" tabindex="-1">1.7 seo <a class="header-anchor" href="#_1-7-seo" aria-label="Permalink to &quot;1.7 seo&quot;">​</a></h2><p>Search Engine Optimization（搜索引擎优化）</p><h3 id="_1-7-0-百度示例" tabindex="-1">1.7.0 百度示例 <a class="header-anchor" href="#_1-7-0-百度示例" aria-label="Permalink to &quot;1.7.0 百度示例&quot;">​</a></h3><p>去到百度搜索 百度搜索资源平台</p><h4 id="_1-7-0-1-绿萝算法-低质量链接" tabindex="-1">1.7.0.1 绿萝算法(低质量链接) <a class="header-anchor" href="#_1-7-0-1-绿萝算法-低质量链接" aria-label="Permalink to &quot;1.7.0.1 绿萝算法(低质量链接)&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">之所以叫绿萝（检测外链），是因为百度大厦中有很多绿萝，用来净化空气，而互联网的空气也需要好好净化。打击买卖链接的行为，包括超链中介、出卖链接的网站、购买链接的网站。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">外链就是指在别的网站导入自己网站的链接</span></span>
<span class="line"><span style="color:#A6ACCD;">软文（有点像软广），是相对于硬性广告而言，指由企业的市场策划人员或广告公司的文案人员来负责撰写的“文字广告”。软文实际上存在于大众媒体中，以新闻报道形式发布的广告。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">打击：软文交易平台</span></span></code></pre></div><h4 id="_1-7-0-2-石榴算法-低质量内容" tabindex="-1">1.7.0.2 石榴算法(低质量内容) <a class="header-anchor" href="#_1-7-0-2-石榴算法-低质量内容" aria-label="Permalink to &quot;1.7.0.2 石榴算法(低质量内容)&quot;">​</a></h4><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">之所以叫石榴，因为当时开发算法的RD哥哥和PM妹妹一个姓“石”，一个姓“刘”，会检测强制弹窗行为，会进行fid检测是否能够关闭.</span></span>
<span class="line"><span style="color:#A6ACCD;">有点像冰桶算法</span></span></code></pre></div><h3 id="_1-7-1-meta头-tdk" tabindex="-1">1.7.1 meta头 | TDK <a class="header-anchor" href="#_1-7-1-meta头-tdk" aria-label="Permalink to &quot;1.7.1  meta头 | TDK&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">xxx</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">keywords</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">HTML5,css,js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">description</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">这是meta的测试</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- 允许抓取本页和跟踪链接，noindex和nofollow是不允许抓取链接和跟踪链接 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">robots</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index,follow</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_1-7-2-pr算法" tabindex="-1">1.7.2 PR算法 <a class="header-anchor" href="#_1-7-2-pr算法" aria-label="Permalink to &quot;1.7.2 PR算法&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">PR是pagerank算法：</span></span>
<span class="line"><span style="color:#A6ACCD;">1.正向反馈的是：这个站点外链本身的pr分值</span></span>
<span class="line"><span style="color:#A6ACCD;">2.负向反馈的是：这个站点外链的数量</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">所以可以在网站中添加 导航到本页面的标签</span></span>
<span class="line"><span style="color:#A6ACCD;">然后可以在不需要导航的链接添加 no follow 例如</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;a href=&quot;&quot; rel=&quot;nofollow&quot;&gt;</span></span></code></pre></div><h3 id="_1-7-3-闪电算法" tabindex="-1">1.7.3 闪电算法 <a class="header-anchor" href="#_1-7-3-闪电算法" aria-label="Permalink to &quot;1.7.3  闪电算法&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">这种算法主要针对移动搜索页面首屏加载时间将影响搜索排名。</span></span></code></pre></div><h3 id="_1-7-4-页面识别难度" tabindex="-1">1.7.4 页面识别难度 <a class="header-anchor" href="#_1-7-4-页面识别难度" aria-label="Permalink to &quot;1.7.4  页面识别难度&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">语义化优化。role标签添加一下</span></span></code></pre></div><h3 id="_1-7-5-检测seo-seo指标" tabindex="-1">1.7.5 检测seo | seo指标 <a class="header-anchor" href="#_1-7-5-检测seo-seo指标" aria-label="Permalink to &quot;1.7.5  检测seo | seo指标&quot;">​</a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">wwwlogs文件夹下面有访问日志 xxxx</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">gz</span></span>
<span class="line"><span style="color:#A6ACCD;">筛选baiduspider</span><span style="color:#89DDFF;">/</span><span style="color:#F78C6C;">2.0</span><span style="color:#A6ACCD;"> 就可以看到访问了多少次</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">站长工具也可以看到网站的seo数据和一些基本数据</span></span>
<span class="line"><span style="color:#A6ACCD;">收录不是越多越好，跟流量不成正比。</span></span>
<span class="line"><span style="color:#A6ACCD;">权重越高，访问人数越多</span></span></code></pre></div><h4 id="_1-7-6-2-robots-txt" tabindex="-1">1.7.6.2 robots.txt <a class="header-anchor" href="#_1-7-6-2-robots-txt" aria-label="Permalink to &quot;1.7.6.2 robots.txt&quot;">​</a></h4><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">spider访问一个站点时，它会首先检查该站点根目录下是否存在robots</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">txt，如果存在，搜索机器人就会按照该文件中的内容来确定访问的范围；如果该文件不存在，</span><span style="color:#82AAFF;">那么搜索机器人就沿着链接抓取</span><span style="color:#A6ACCD;">(而且文件名必须全部小写)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//允许 访问 所有的东西</span></span>
<span class="line"><span style="color:#A6ACCD;">User</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">agent</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span></span>
<span class="line"><span style="color:#FFCB6B;">Disallow</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//不允许 访问  /03/路径的东西</span></span>
<span class="line"><span style="color:#A6ACCD;">User</span><span style="color:#89DDFF;">-</span><span style="color:#FFCB6B;">agent</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> Crawler</span></span>
<span class="line"><span style="color:#FFCB6B;">Disallow</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">03</span><span style="color:#89DDFF;">/</span></span></code></pre></div><h3 id="_1-7-6-域名等级" tabindex="-1">1.7.6 域名等级 <a class="header-anchor" href="#_1-7-6-域名等级" aria-label="Permalink to &quot;1.7.6 域名等级&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">域名有等级划分</span></span></code></pre></div><h3 id="_1-7-7-ssr-spa-不利于seo" tabindex="-1">1.7.7 SSR | SPA 不利于seo <a class="header-anchor" href="#_1-7-7-ssr-spa-不利于seo" aria-label="Permalink to &quot;1.7.7 SSR | SPA 不利于seo&quot;">​</a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">spider直接爬你页面一开始的静态页面</span></span></code></pre></div><h3 id="_1-7-8-反向seo-减少网站服务器的负担" tabindex="-1">1.7.8 反向seo | 减少网站服务器的负担 <a class="header-anchor" href="#_1-7-8-反向seo-减少网站服务器的负担" aria-label="Permalink to &quot;1.7.8   反向seo |  减少网站服务器的负担&quot;">​</a></h3><h4 id="_1-7-6-1-meta的rebots头" tabindex="-1">1.7.6.1 meta的rebots头 <a class="header-anchor" href="#_1-7-6-1-meta的rebots头" aria-label="Permalink to &quot;1.7.6.1 meta的rebots头&quot;">​</a></h4><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">&lt;!-- noindex和nofollow是不允许抓取链接和跟踪链接 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">meta</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">robots</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">content</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">index,follow</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">我们需要告诉搜索引擎哪些页面重要哪些页面不重要，重要的页面让蜘蛛进行抓取，不重要的页面进行屏蔽可以减少网站服务器的负担</span></span></code></pre></div><h2 id="_1-8-无障碍" tabindex="-1">1.8 无障碍 <a class="header-anchor" href="#_1-8-无障碍" aria-label="Permalink to &quot;1.8 无障碍&quot;">​</a></h2><ul><li>视障：配色方案 | 字体大小(放大缩小也可以) | 可聚焦控件</li><li>运动功能障碍：键盘控件，非鼠标功能 | label</li><li>听力障碍的人依赖于替代音频/视频内容的文本</li></ul><p>nvda appliction 可以用来调试无障碍</p><h3 id="_1-8-1-语义化的作用" tabindex="-1">1.8.1 语义化的作用 <a class="header-anchor" href="#_1-8-1-语义化的作用" aria-label="Permalink to &quot;1.8.1 语义化的作用&quot;">​</a></h3><p>下面的按键，单独使用其本身切换到下一个可用的元素，加入 Shift 键后切换到上一个可用的元素：</p><ul><li>​ h:标题</li><li>​ l:列表</li><li>​ i: 列表项目</li><li>​ t: 表格</li><li>​ k: 链接</li><li>​ g: 图片</li><li>​ 1 到 6: 分别表示1到6级的标题</li></ul><h3 id="_1-8-1-role" tabindex="-1">1.8.1 role <a class="header-anchor" href="#_1-8-1-role" aria-label="Permalink to &quot;1.8.1 role&quot;">​</a></h3><p>这玩意只能在语义上进行定义，在无障碍api中没有用</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">role</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">checkbox</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> &gt;&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_1-8-2-关于表格-accessibility-aids" tabindex="-1">1.8.2 关于表格(accessibility aids) <a class="header-anchor" href="#_1-8-2-关于表格-accessibility-aids" aria-label="Permalink to &quot;1.8.2 关于表格(accessibility aids)&quot;">​</a></h3><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">下面这种表格可以说是最佳实践</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">table</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">caption</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">A summary of the UK&#39;s most famous punk bands</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">caption</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">thead</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">tr</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">col</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Band</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">col</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Year formed</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">col</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">No. of Albums</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">col</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Most famous song</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">tr</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">thead</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">tbody</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">tr</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scope</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">row</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Buzzcocks</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">th</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">td</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">1976</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">td</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">td</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">9</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">td</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">td</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Ever fallen in love (with someone you shouldn&#39;t&#39;ve)</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">td</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">tr</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">tbody</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">     </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">table</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_1-8-2-aria" tabindex="-1">1.8.2 aria <a class="header-anchor" href="#_1-8-2-aria" aria-label="Permalink to &quot;1.8.2  aria&quot;">​</a></h3><p>当焦点落到该输入框时，读屏软件就会读出aria-label里的内容，即&quot;标签提示内容&quot;。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">tabindex</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">0″ aria-label=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">标签提示内容</span><span style="color:#89DDFF;">&quot;&gt;</span><span style="color:#A6ACCD;">可被tab的span标签</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">aria-hidden=&quot;true&quot;  能够直接隐藏                                 </span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">                  </span></span>
<span class="line"><span style="color:#A6ACCD;">辅助设备就会获取aria-label的值读给听.）</span></span>
<span class="line"><span style="color:#A6ACCD;">可视化设备： </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">’button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">disabled’</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">点我</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">屏幕阅读设备： </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">’button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">disabled’</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">role</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">’button’</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">aria-checked</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">’false’</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">aria-disabled</span><span style="color:#89DDFF;">=</span><span style="color:#C3E88D;">’true’</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">点我</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h3 id="_1-8-5-读出指定的声音" tabindex="-1">1.8.5 读出指定的声音 <a class="header-anchor" href="#_1-8-5-读出指定的声音" aria-label="Permalink to &quot;1.8.5 读出指定的声音&quot;">​</a></h3><ul><li>img标签:alt属性</li><li>input/button:aria-label 属性</li><li></li></ul><h3 id="_1-8-6-tabindex" tabindex="-1">1.8.6 tabindex <a class="header-anchor" href="#_1-8-6-tabindex" aria-label="Permalink to &quot;1.8.6 tabindex&quot;">​</a></h3><p>tabindex=&quot;0&quot;</p><p>​</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">什么时候需要使用 tab_index</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> 大小标题</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F78C6C;">1.2</span><span style="color:#A6ACCD;"> 超链接</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F78C6C;">1.3</span><span style="color:#A6ACCD;"> 搜索栏目</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F78C6C;">1.4</span><span style="color:#A6ACCD;"> 菜单</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F78C6C;">1.5</span><span style="color:#A6ACCD;"> 按钮 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 表单项目</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">            只有三种情况 </span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">负值</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">键盘不能够tab</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">:键盘能tab，优先级最低</span></span>
<span class="line"><span style="color:#A6ACCD;">            </span><span style="color:#FFCB6B;">正值</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">按照大小的优先级来排列</span></span></code></pre></div><h3 id="_1-8-7-aria-busy" tabindex="-1">1.8.7 aria-busy <a class="header-anchor" href="#_1-8-7-aria-busy" aria-label="Permalink to &quot;1.8.7 aria-busy&quot;">​</a></h3><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">当在向用户宣布更改之前需要加载实时区域的多个部分时，请设置aria</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">busy</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">true</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">直到加载完成。然后设置为aria</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">busy</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">false</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;"> 这可以防止辅助技术在更新完成之前宣布更改</span></span></code></pre></div><h3 id="_1-8-4-最佳实践" tabindex="-1">1.8.4 最佳实践 <a class="header-anchor" href="#_1-8-4-最佳实践" aria-label="Permalink to &quot;1.8.4 最佳实践&quot;">​</a></h3><ul><li>焦点(注意css的outline属性)</li></ul><h2 id="_1-9-fetch示例" tabindex="-1">1.9 Fetch示例 <a class="header-anchor" href="#_1-9-fetch示例" aria-label="Permalink to &quot;1.9 Fetch示例&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">let</span><span style="color:#A6ACCD;"> datat </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">fetch</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">data.json</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">method</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">GET</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">headers</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">//   &#39;Content-Type&#39;: &#39;application/json&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// body: JSON.stringify({</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//     uname: &#39;张三&#39;,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">//     pwd: &#39;456&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// }), </span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 请求的模式，如</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">mode</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">cors</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 为了自动发送cookie</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">credentials</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">include</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 缓存设置</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">cache</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">default</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 请求json数据这个stream只能请求一次</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ceshi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">json</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#A6ACCD;">ceshi</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">result</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">result</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="_1-10-不同端口的cookies信息是否共享" tabindex="-1">1.10 不同端口的cookies信息是否共享 <a class="header-anchor" href="#_1-10-不同端口的cookies信息是否共享" aria-label="Permalink to &quot;1.10  不同端口的cookies信息是否共享&quot;">​</a></h2><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">cookie 区分域，而不区分端口.同一个 ip 下的多个端口下的 cookie 是共享的！并且http和https都是一样的。</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">但是带有 Secure 属性的不能被 http 共享 带有 HttpOnly 属性的 cookie 无法被 document.cookie 访问</span></span></code></pre></div><h2 id="_1-11-csrf-xss-中间人攻击" tabindex="-1">1.11 csrf | xss | 中间人攻击 <a class="header-anchor" href="#_1-11-csrf-xss-中间人攻击" aria-label="Permalink to &quot;1.11 csrf | xss | 中间人攻击&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">1</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">xss 就是对用户的输入过滤不严格。对用户进行攻击。嵌入代码中（引导用户跳转 </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> ）。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">1.1</span><span style="color:#A6ACCD;"> 解决：对输入进行过滤就可以了</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">2</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">csrf（Cross</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">site request forgery） 跨站请求伪造。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.1</span><span style="color:#A6ACCD;"> 解决：对用户行为添加token和referer</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">2.2</span><span style="color:#A6ACCD;"> 检测：抓取一个正常请求的数据包，去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#A6ACCD;">3</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">中间人攻击：就是对双方进行伪造。</span></span>
<span class="line"><span style="color:#89DDFF;">--</span><span style="color:#F78C6C;">3.1</span><span style="color:#A6ACCD;"> 解决：使用https </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> 不要使用公共wifi</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-7b3ebfe1>Last updated: <time datetime="2023-10-18T00:57:34.000Z" data-v-7b3ebfe1></time></p></div></div><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><!----></div><div class="pager" data-v-face870a><a class="pager-link next" href="/front-base-know-blog/know/know/2javascript%E5%9F%BA%E7%A1%80" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>js基础(1)</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-f0b011de data-v-2f86ebd2><div class="container" data-v-2f86ebd2><p class="message" data-v-2f86ebd2>MIT License.</p><p class="copyright" data-v-2f86ebd2>Copyright © 2023～present Electrolux</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"95f8ca9d\",\"java_base.md\":\"edc53698\",\"guide_quick start.md\":\"51bdad5b\",\"java_java.md\":\"07f7958b\",\"know_know_11.web3.md\":\"930011fd\",\"supper_工具基础_16.代码高亮.md\":\"775a71ba\",\"supper_工具基础_6codepen.md\":\"46f8bbbd\",\"supper_工具基础_5ps切图.md\":\"dc662c1f\",\"supper_前端库_1vueify.md\":\"04b61666\",\"supper_工程化_7性能优化和调试.md\":\"981a8dd6\",\"know_know_8adb.md\":\"ccc6c2e0\",\"supper_工具基础_1sourcetree的使用.md\":\"d71319d4\",\"know_know_10.项目具体代码优化.md\":\"f55add09\",\"supper_工程化_4docker 部署实操.md\":\"2e571e48\",\"know_know_1html.md\":\"19aaf16a\",\"supper_工具基础_8graphql.md\":\"198ddc72\",\"supper_工程化_6gitee流水线.md\":\"93a4c7ff\",\"know_know_5javascript-es6.md\":\"4c2cf8f7\",\"know_框架_16.echart.md\":\"0ada5f86\",\"know_know_3javascript基础.md\":\"900d378b\",\"know_优化_3算法.md\":\"8f5141e6\",\"know_框架_14webgl基础.md\":\"00a11e3e\",\"python_flask.md\":\"c8a0482c\",\"supper_功能_9监控停留时间.md\":\"2df00eaf\",\"know_框架_7python.md\":\"7d7eed5d\",\"supper_工程化_1工程化基础.md\":\"d48b3bbc\",\"know_优化_9wasm.md\":\"8d5d5bf6\",\"supper_工具基础_3github图床.md\":\"7073aa94\",\"supper_功能_8前端上传下载.md\":\"99e30d2a\",\"know_框架_13electron.md\":\"d3e93be3\",\"supper_前端库_3js-cookie.md\":\"91624dd6\",\"supper_工具基础_9快速mock.md\":\"215a0e2b\",\"know_know_4javascript代码输出题.md\":\"7348a30a\",\"python_base.md\":\"7acd6bad\",\"supper_功能_5微信支付.md\":\"d09d8b08\",\"know_框架_12threejs.md\":\"b6fbcf93\",\"know_框架_7tensorflow.md\":\"2ccc8062\",\"supper_工具基础_7icon实操.md\":\"f1512b60\",\"supper_工具基础_2用gitee连接ssh_linux服务器.md\":\"1bc61e8d\",\"supper_3d数字孪生_3ar的使用.md\":\"5db75881\",\"python_flask_开始.md\":\"54460465\",\"know_know_12.运维.md\":\"b8bd4e62\",\"supper_工具基础_14.vscode.md\":\"f106db65\",\"know_优化_12.pwa.md\":\"8327b1db\",\"know_know_6ts.md\":\"49f90aab\",\"supper_supper_4ui设计.md\":\"53988b67\",\"supper_功能_10数据大屏自适应.md\":\"7c40b558\",\"supper_工程化_3关于一些自动化脚本.md\":\"38029566\",\"know_know_4javascript手写题.md\":\"50a7a32f\",\"supper_工具基础_13mac的使用.md\":\"56de5b9c\",\"know_know_2javascript基础.md\":\"3d42c0ee\",\"supper_功能_7深度学习实操.md\":\"f6b94234\",\"know_优化_5npm_组件库构造.md\":\"67d2b67c\",\"know_计算机基础_1计算机网络.md\":\"5d905f95\",\"supper_3d数字孪生_2three世泊大屏实操.md\":\"beb9c2f8\",\"supper_功能_11拖拽元素.md\":\"cf7bf8a0\",\"python_llm.md\":\"e97febae\",\"know_know_7css.md\":\"06a3d117\",\"supper_supper_2实用算法.md\":\"e4baf1d9\",\"supper_工具基础_4git的基本使用.md\":\"c5629b74\",\"supper_功能_12vue-element-admin.md\":\"20c09558\",\"supper_工程化_5给包打补丁.md\":\"5103e073\",\"know_框架_11逆向数据crawl.md\":\"ae5ee06c\",\"supper_功能_4ffmpeg-rmtp监控.md\":\"39152e9b\",\"project_图表绘制.md\":\"dd437537\",\"supper_工具基础_12nvm.md\":\"329d446d\",\"know_框架_8mediapipe.md\":\"23fc89f2\",\"know_优化_6webrtc.md\":\"21589281\",\"know_优化_1性能优化和安全.md\":\"270924f0\",\"supper_功能_1小功能汇总.md\":\"5663f27a\",\"know_框架_4微前端.md\":\"76663f96\",\"supper_supper_1代码优化.md\":\"6126a362\",\"know_框架_10aframe.md\":\"7daf1aa1\",\"supper_supper_3性能优化.md\":\"86672f22\",\"know_优化_11.webcomponent.md\":\"94e3cf8a\",\"supper_功能_2小功能汇总.md\":\"692f88ef\",\"know_框架_1vue.md\":\"a9100a41\",\"supper_个人封装_1个人发包模板.md\":\"6b48d3d3\",\"supper_工具基础_10脚手架.md\":\"534226fa\",\"supper_工具基础_11figma.md\":\"ffebb5c1\",\"know_框架_15threejs.md\":\"85dc8e0c\",\"supper_功能_3小功能汇总.md\":\"9765dc9a\",\"supper_功能_6v-model组件封装.md\":\"9df7d5cf\",\"supper_3d数字孪生_5threejs的性能优化.md\":\"eafc4b19\",\"know_框架_8ffmpeg.md\":\"56543d8b\",\"supper_3d数字孪生_1webgl基础.md\":\"9602a381\",\"know_框架_4three数据大屏.md\":\"9b71f7c5\",\"know_框架_3ssr.md\":\"f78ee50f\",\"supper_前端库_2anime.js.md\":\"62c0fbd1\",\"know_框架_2react.md\":\"3ef491f2\",\"know_框架_5vue3.md\":\"a9430a8a\",\"know_框架_17webpack.md\":\"d7f6f200\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Electrolux_blog\",\"description\":\"hello world\",\"base\":\"/front-base-know-blog/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"outlineTitle\":\"目录\",\"i18nRouting\":true,\"logo\":\"https://cdn.jsdelivr.net/npm/electroluxasset@1.0.8/image/svg/book.svg\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端基础\",\"link\":\"/know/know/1html\"},{\"text\":\"前端工程化\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"Python\",\"link\":\"/python/flask.md\"},{\"text\":\"Java\",\"link\":\"/java/java.md\"},{\"text\":\"项目\",\"link\":\"/project/javadump分析.md\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/Electrolux\"}],\"footer\":{\"message\":\"MIT License.\",\"copyright\":\"Copyright © 2023～present Electrolux\"},\"sidebar\":{\"/know/\":[{\"text\":\"前端基础\",\"collapsed\":false,\"items\":[{\"text\":\"html(浏览器)\",\"link\":\"/know/know/1html\"},{\"text\":\"js基础(1)\",\"link\":\"/know/know/2javascript基础\"},{\"text\":\"js基础(2)\",\"link\":\"/know/know/3javascript基础\"},{\"text\":\"js基础(3) | 手写题\",\"link\":\"/know/know/4javascript手写题\"},{\"text\":\"js基础(3) | 代码输出\",\"link\":\"/know/know/4javascript代码输出题\"},{\"text\":\"js基础(4) | es6\",\"link\":\"/know/know/5javascript-es6\"},{\"text\":\"js基础(5)\",\"link\":\"/know/know/9javascript基础\"},{\"text\":\"TypeScript\",\"link\":\"/know/know/6ts\"},{\"text\":\"CSS\",\"link\":\"/know/know/7css\"},{\"text\":\"BUG\",\"link\":\"/know/know/8bug\"}]},{\"text\":\"计算机基础\",\"collapsed\":false,\"items\":[{\"text\":\"计算机网络\",\"link\":\"/know/计算机基础/1计算机网络\"}]},{\"text\":\"框架 | 工具\",\"collapsed\":false,\"items\":[{\"text\":\"vue\",\"link\":\"/know/框架/1vue\"},{\"text\":\"react\",\"link\":\"/know/框架/2react\"},{\"text\":\"ssr\",\"link\":\"/know/框架/3ssr\"},{\"text\":\"微前端\",\"link\":\"/know/框架/4微前端\"},{\"text\":\"vue3\",\"link\":\"/know/框架/5vue3\"},{\"text\":\"nginx\",\"link\":\"/know/框架/6nginx\"},{\"text\":\"python\",\"link\":\"/know/框架/7python\"},{\"text\":\"ffmpeg\",\"link\":\"/know/框架/8ffmpeg\"},{\"text\":\"tensorFlow\",\"link\":\"/know/优化/7tensorFlow\"},{\"text\":\"mediapipe\",\"link\":\"/know/优化/8mediapipe\"},{\"text\":\"aframe\",\"link\":\"/know/框架/10aframe\"},{\"text\":\"逆向数据crawl\",\"link\":\"/know/框架/11逆向数据crawl\"},{\"text\":\"threejs\",\"link\":\"/know/框架/12threejs\"},{\"text\":\"13electron\",\"link\":\"/know/框架/13electron\"},{\"text\":\"13electron\",\"link\":\"/know/框架/17webpack\"}]},{\"text\":\"优化 | 工程\",\"collapsed\":false,\"items\":[{\"text\":\"性能优化和安全\",\"link\":\"/know/优化/1性能优化和安全\"},{\"text\":\"算法\",\"link\":\"/know/优化/3算法\"},{\"text\":\"性能优化\",\"link\":\"/know/优化/4性能优化\"},{\"text\":\"组件库构造\",\"link\":\"/know/优化/5npm,组件库构造\"},{\"text\":\"webrtc\",\"link\":\"/know/优化/6webrtc\"},{\"text\":\"wasm\",\"link\":\"/know/优化/9.wasm\"},{\"text\":\"webcomponent\",\"link\":\"/know/优化/11.webcomponent\"},{\"text\":\"pwa\",\"link\":\"/know/优化/12.pwa\"}]}],\"/java/\":[{\"text\":\"java\",\"collapsed\":false,\"items\":[{\"text\":\"jvm\",\"link\":\"/java/java\"},{\"text\":\"springboot\",\"link\":\"/java/base\"}]}],\"/python/\":[{\"text\":\"python 基础\",\"collapsed\":false,\"items\":[{\"text\":\"服务器\",\"link\":\"/python/flask\"}]}],\"/project/\":[{\"text\":\"项目文档\",\"collapsed\":false,\"items\":[{\"text\":\"java dump\",\"link\":\"/project/图表绘制\"}]}],\"/supper/\":[{\"text\":\"代码高级\",\"collapsed\":false,\"items\":[{\"text\":\"代码优化 | 设计模式\",\"link\":\"/supper/supper/1代码优化\"},{\"text\":\"设计模式与js\",\"link\":\"/supper/supper/2实用算法\"},{\"text\":\"性能优化\",\"link\":\"/supper/supper/3性能优化\"},{\"text\":\"UI设计\",\"link\":\"/supper/supper/4UI设计\"}]},{\"text\":\"工程化\",\"collapsed\":false,\"items\":[{\"text\":\"工程化基础\",\"link\":\"/supper/工程化/1工程化基础\"},{\"text\":\"webpack的配置\",\"link\":\"/supper/工程化/2webpack的配置\"},{\"text\":\"自动化脚本\",\"link\":\"/supper/工程化/3关于一些自动化脚本\"},{\"text\":\"docker 部署实操\",\"link\":\"/supper/工程化/4docker 部署实操\"},{\"text\":\"patch-package\",\"link\":\"/supper/工程化/5给包打补丁\"},{\"text\":\"gitee流水线\",\"link\":\"/supper/工程化/6gitee流水线\"}]},{\"text\":\"工具基础\",\"collapsed\":false,\"items\":[{\"text\":\"Sourcetree的使用\",\"link\":\"/supper/工具基础/1Sourcetree的使用\"},{\"text\":\"用gitee连接ssh,linux服务器\",\"link\":\"/supper/工具基础/2用gitee连接ssh,linux服务器\"},{\"text\":\"github图床\",\"link\":\"/supper/工具基础/3github图床\"},{\"text\":\"git的基本使用\",\"link\":\"/supper/工具基础/4git的基本使用\"},{\"text\":\"ps切图\",\"link\":\"/supper/工具基础/5ps切图\"},{\"text\":\"codepen\",\"link\":\"/supper/工具基础/6codepen\"},{\"text\":\"icon实操 | svg原理\",\"link\":\"/supper/工具基础/7Icon实操\"},{\"text\":\"GraphQl\",\"link\":\"/supper/工具基础/8GraphQl\"},{\"text\":\"快速mock\",\"link\":\"/supper/工具基础/9快速mock\"},{\"text\":\"脚手架\",\"link\":\"/supper/工具基础/10脚手架\"},{\"text\":\"figma\",\"link\":\"/supper/工具基础/11figma\"},{\"text\":\"nvm\",\"link\":\"/supper/工具基础/12nvm\"},{\"text\":\"苹果\",\"link\":\"/supper/工具基础/13mac的使用\"}]},{\"text\":\"个人封装\",\"collapsed\":false,\"items\":[{\"text\":\"个人封装\",\"link\":\"/supper/个人封装/1个人发包模板\"}]},{\"text\":\"前端库\",\"collapsed\":false,\"items\":[{\"text\":\"vueify\",\"link\":\"/supper/前端库/1vueify\"},{\"text\":\"anime.js\",\"link\":\"/supper/前端库/2anime.js\"},{\"text\":\"js-cookie\",\"link\":\"/supper/前端库/3js-cookie\"}]},{\"text\":\"功能\",\"collapsed\":false,\"items\":[{\"text\":\"小功能汇总1\",\"link\":\"/supper/功能/1小功能汇总\"},{\"text\":\"小功能汇总2\",\"link\":\"/supper/功能/2小功能汇总\"},{\"text\":\"小功能汇总3\",\"link\":\"/supper/功能/3小功能汇总\"},{\"text\":\"ffmpeg-rmtp监控\",\"link\":\"/supper/功能/4ffmpeg-rmtp监控\"},{\"text\":\"微信支付\",\"link\":\"/supper/功能/5微信支付\"},{\"text\":\"v-model组件封装\",\"link\":\"/supper/功能/6v-model组件封装\"},{\"text\":\"深度学习实操\",\"link\":\"/supper/功能/7深度学习实操\"},{\"text\":\"前端上传下载\",\"link\":\"/supper/功能/8前端上传下载\"},{\"text\":\"监控停留时间\",\"link\":\"/supper/功能/9监控停留时间\"},{\"text\":\"数据大屏自适应\",\"link\":\"/supper/功能/10数据大屏自适应\"},{\"text\":\"拖拽元素\",\"link\":\"/supper/功能/11拖拽元素\"},{\"text\":\"vue-element-admin\",\"link\":\"/supper/功能/12vue-element-admin\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}")</script>
    
  </body>
</html>